<template>
  <view class="wrap">
    <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="userId" prop="userId" label-width="180">
        <u-input v-model="model.userId" type="text" maxlength="64" :disabled="true"></u-input>
      </u-form-item>
      <u-form-item label="姓名" prop="username" label-width="180">
        <u-input placeholder="请输入姓名" v-model="model.username" type="text" maxlength="200"></u-input>
      </u-form-item>
      <u-form-item label="密码" prop="password" label-width="180">
        <u-input placeholder="请输入密码" v-model="model.password" type="password" maxlength="500"></u-input>
      </u-form-item>
      <u-form-item label="手机号" prop="phone" label-width="180">
        <u-input placeholder="请输入手机号" v-model="model.phone" type="text" maxlength="200"></u-input>
      </u-form-item>
      <u-form-item label="所属部门" prop="deptId" label-width="260">
        <js-select v-model="model.deptId"  placeholder="请选择部门"
                   itemLabel="name" itemValue="deptId" :items="deptList"></js-select>
      </u-form-item>
      <u-form-item label="岗位" prop="post" label-width="180">
        <js-checkbox v-model="post" itemLabel="postName" itemValue="postId" :multiple="true" :items="postList">
        </js-checkbox>
      </u-form-item>
      <u-form-item label="角色" prop="role" label-width="180">
        <js-checkbox v-model="role" itemLabel="roleName" itemValue="roleId" :multiple="true" :items="roleList">
        </js-checkbox>
      </u-form-item>
      <u-form-item label="状态" prop="lockFlag" label-width="180">
        <js-radio v-model="model.lockFlag" itemLabel="label" itemValue="value" :multiple="true"
                  :items="lockData"></js-radio>
      </u-form-item>
      <u-form-item label="昵称" prop="nickname" label-width="180">
        <u-input v-model="model.nickname" type="text" maxlength="64" placeholder="请输入昵称"></u-input>
      </u-form-item>
      <u-form-item label="邮箱" prop="email" label-width="180">
        <u-input v-model="model.email" type="text" maxlength="64" placeholder="请输入邮箱"></u-input>
      </u-form-item>
    </u-form>
    <view class="form-footer">
      <u-button class="btn" type="primary" @click="submit">提交</u-button>
      <u-button class="btn" type="default" @click="cancel">关闭</u-button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      model: {
        userId: '',
        username: '',
        password: '',
        phone: '',
        post: [],
        role: [],
        lockFlag: '',
        nickname: '',
        email: '',
        createTime: ''
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: ['change', 'blur'],
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: ['change', 'blur'],
        }]
      },
      lockData: [{
        label: '有效',
        value: '0'
      }, {
        label: '锁定',
        value: '9'
      }],
      post: '',
      role: '',
      deptList: [],
      postList: [],
      roleList: [],
      officeSelectList: [],
      userSelectList: [],
    };
  },
  onLoad(params) {
    if (params && params.id !== "undefined") {
      this.type = 'edit'
      this.$u.api.unixUser.getOne(params).then(res => {
        Object.assign(this.model, res.data);
        this.model.password = ''
        this.role = '';
        if (this.model.roleList && this.model.roleList.length > 0) {
          this.role = this.model.roleList.map(item => item.roleId).join()
        }

        this.post = ''
        if (this.model.postList && this.model.postList.length > 0) {
          this.post = this.model.postList.map(item => item.postId).join()
        }
      });
    } else {
      this.type = 'add'
      this.model = {}
    }

  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    // todo 查询机构数据
    this.$u.api.unixDept.list().then(res => {
      this.deptList = res.data;
    });
    // 查询岗位信息
    this.$u.api.unixPost.list().then(res => {
      this.postList = res.data
    })
    //查询角色列表
    this.$u.api.unixRole.list().then(res => {
      this.roleList = res.data
    })
  },
  methods: {
    confirmSelect(e) {
      this.show = false
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.model.post = this.post.split(',')
          this.model.role = this.role.split(',')
          this.$u.api.unixUser.putObj(this.model).then(res => {
            uni.showModal({
              title: '提示',
              content: '修改成功',
              showCancel: false,
              success: function () {
                uni.setStorageSync('refreshList', true);
                uni.navigateBack();
              }
            });
          });
        } else {
          this.$u.toast('您填写的信息有误，请根据提示修正。');
        }
      });
    },
    cancel() {
      uni.navigateBack();
    }
  }
};
</script>
